<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>GLSL Editor</title>
        <link href='/favicon.gif' rel='shortcut icon'/>

        <!-- GLSL Canvas -->
        <script type='text/javascript' src='https://thebookofshaders.com/glslCanvas/GlslCanvas.js'></script>
        <link type='text/css' rel='stylesheet' href='https://thebookofshaders.com/glslEditor/glslEditor.css'>
        <script type='application/javascript' src='https://thebookofshaders.com/glslEditor/glslEditor.js'></script>

        <style>
            body {
                background: #FFFFFF;
            }

            #glsl_editor {
                display: block;
                margin-top: auto;
                margin-bottom: auto;
            }

            canvas.ge_canvas {
                float: top;
                position: relative;
                display: block;
                margin-left: auto;
                margin-right: auto;
                max-width: 1200px;
            }

            .CodeMirror {
                background: #FFFFFF;
                font-size: 14px;
                line-height: 1.5em;
                margin-left: auto;
                margin-right: auto;
                max-width: 700px;
            }

            .cm-s-default .cm-variable-3 {
                color: #708;
            }

            .cm-s-default .cm-keyword {
                color: #708;
            }

        </style>
    </head>
    <body>
        <div id='glsl_editor'></div>
    </body>

    <script type='text/javascript'>
        var preFunction = '\n\
#ifdef GL_ES\n\
precision mediump float;\n\
#endif\n\
\n\
#define PI 3.14159265359\n\
\n\
uniform vec2 u_resolution;\n\
uniform vec2 u_mouse;\n\
uniform float u_time;\n\
\n\
float lineJitter = 0.5;\n\
float lineWidth = 7.0;\n\
float gridWidth = 1.7;\n\
float scale = 0.001;\n\
float zoom = 2.5;\n\
vec2 offset = vec2(0.5);\n\
\n';

    var postFunction = '\n\
float rand(vec2 co){\n\
    return fract(sin(dot(co.xy,vec2(12.9898,78.233)))*43758.5453);\n\
}\n\
\n\
vec3 plot2D(in vec2 _st, in float _width ) {\n\
    const float samples = 3.0;\n\
\n\
    vec2 steping = _width*vec2(scale)/samples;\n\
    \n\
    float count = 0.0;\n\
    float mySamples = 0.0;\n\
    for (float i = 0.0; i < samples; i++) {\n\
        for (float j = 0.0;j < samples; j++) {\n\
            if (i*i+j*j>samples*samples) \n\
                continue;\n\
            mySamples++;\n\
            float ii = i + lineJitter*rand(vec2(_st.x+ i*steping.x,_st.y+ j*steping.y));\n\
            float jj = j + lineJitter*rand(vec2(_st.y + i*steping.x,_st.x+ j*steping.y));\n\
            float f = function(_st.x+ ii*steping.x)-(_st.y+ jj*steping.y);\n\
            count += (f>0.) ? 1.0 : -1.0;\n\
        }\n\
    }\n\
    vec3 color = vec3(1.0);\n\
    if (abs(count)!=mySamples)\n\
        color = vec3(abs(float(count))/float(mySamples));\n\
    return color;\n\
}\n\
\n\
vec3 grid2D( in vec2 _st, in float _width ) {\n\
    float axisDetail = _width*scale;\n\
    if (abs(_st.x)<axisDetail || abs(_st.y)<axisDetail) \n\
        return 1.0-vec3(0.65,0.65,1.0);\n\
    if (abs(mod(_st.x,1.0))<axisDetail || abs(mod(_st.y,1.0))<axisDetail) \n\
        return 1.0-vec3(0.80,0.80,1.0);\n\
    if (abs(mod(_st.x,0.25))<axisDetail || abs(mod(_st.y,0.25))<axisDetail) \n\
        return 1.0-vec3(0.95,0.95,1.0);\n\
    return vec3(0.0);\n\
}\n\
\n\
void main(){\n\
    vec2 st = (gl_FragCoord.xy/u_resolution.xy)-offset;\n\
    st.x *= u_resolution.x/u_resolution.y;\n\
\n\
    scale *= zoom;\n\
    st *= zoom;\n\
\n\
    vec3 color = plot2D(st,lineWidth);\n\
    color -= grid2D(st,gridWidth);\n\
\n\
    gl_FragColor = vec4(color,1.0);\n\
}';
        var funct = 'float function (float x) {\n\
    float y = x;\n\
    return y;\n\
}';

    function loadjscssfile(filename, filetype, callback){
            if (filetype=="js") { //if filename is a external JavaScript file
                var fileref = document.createElement('script')
                fileref.setAttribute("type","text/javascript")
                fileref.setAttribute("src", filename)
            }
            else if (filetype=="css") { //if filename is an external CSS file
                var fileref = document.createElement("link")
                fileref.setAttribute("rel", "stylesheet")
                fileref.setAttribute("type", "text/css")
                fileref.setAttribute("href", filename)
            }

            fileref.onload = callback;
            fileref.onreadystatechange = callback;

            if (typeof fileref != "undefined") {
                document.getElementsByTagName("head")[0].appendChild(fileref)
            }
        }


        window.onload = function() {
            // if ()
            if (window.GlslEditor && window.GlslEditor) {
                init();
            }
            else {
                console.log('Try to load a local glslEditor');
                loadjscssfile('src/glslCanvas/GlslCanvas.js', 'js');
                loadjscssfile('src/glslEditor/glslEditor.css', 'css');
                loadjscssfile('src/glslEditor/glslEditor.js', 'js', init);
            }
        };

        function init() {
            window.glslEditor = new GlslEditor('#glsl_editor', {
                                                                    canvas_width: 900,
                                                                    canvas_height: 300,
                                                                    canvas_follow: true,
                                                                    canvas_float: false,
                                                                    lineNumbers: false,
                                                                    frag_header: preFunction,
                                                                    frag_footer: postFunction,
                                                                    frag: funct,
                                                                    multipleBuffers: true
                                                                });
        }
    </script>
</html>
